<template>
  <!-- 学校基本信息 -->
  <div class="sub-content-info">
    <div class="title1">类型统计</div>
    <div style="display:flex; padding-left: 6%;;">
      <div style="position:relative; height:200px; width:45%">
        <div class="pie-bottom-icon">
          <img src="@/assets/img/bottom.png" alt="">
        </div>
        <div class="pie-bg-icon img-blink">
          <img src="@/assets/img/pie-bg.png" alt="">
        </div>
        <div class="pie-icon img-bounce">
          <img src="@/assets/img/pie.png" alt="">
        </div>
      </div>
      <div>
        <div class="static">
          <img src="@/assets/img/circle.png" alt="">
          <span class="school-title">当前地震总数<span
              class="school-num">{{this.lastTotalDataDict['eq_total']}}</span>次</span>
        </div>
        <div class="static-bg">
          <div class="name">地震速报</div>
          <div style="color: #f9de64;font-size:23px;text-align: center;padding:7px 0;">
            {{this.lastTotalDataDict['eqr_tatal']}}<span
              style="color: #ffffff;font-size:14px;">次</span> </div>
        </div>
        <div class="static-bg">
          <div class="name">地震预警</div>
          <div style="color: #5cb2fa;font-size:23px;text-align: center;padding:7px 0;">
            {{this.lastTotalDataDict['eew_tatal']}} <span
              style="color: #ffffff;font-size:14px;">次</span> </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'eqcountContent2',
  props: {
    lastTotalDataDict: {
      type: Object,  //类型判断
      default: {}    //默认值
    },
  },
  data() {
    return {
    }
  },
  methods: {
  },
}
</script>
<style>
.sub-content-info .title1 {
	font-family: SourceHanSansCN-Bold;
	font-size: 18px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 34px;
	letter-spacing: 1px;
	color: #b1eded;
	margin-top: 10px;
	background: url(@/assets/img/sub_title_bg.png);
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	width: 300px;
	height: 38px;
  margin-bottom: 10px;
  padding-left: 10px;
}

/* 分割线 */
.divider {
  height: 1px;
  background-color: #528693;
  width: 100%;
}

.sub-content-info .pie-icon img {
  width: 121px;
  height: 80px;
  position: absolute;
  /* bottom: 8%; */
  left: 15px;
  margin-top: 45%;
}

.sub-content-info .pie-bg-icon img {
  width: 121px;
  height: 80px;
  position: absolute;
  top: 4%;
  left: 15px;
}

.sub-content-info .pie-bottom-icon img {
  width: 151px;
  height: 81px;
  position: absolute;
  bottom: 8%;
  left: 0;
}

.sub-content-info .static {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.sub-content-info .static img {
  width: 14px;
  height: 14px;
}

/* 图片闪烁 */
.img-blink {
  animation: fade 1s infinite;
  -moz-animation: fade 1s infinite;
  /* Firefox */
  -webkit-animation: fade 1s infinite;
  /* Safari 和 Chrome */
  -o-animation: fade 1s infinite;
  /* Opera */
}

@keyframes fade {
  from {
    opacity: 1.0;
  }

  50% {
    opacity: 0.4;
  }

  to {
    opacity: 1.0;
  }
}

@-moz-keyframes fade

/* Firefox */
  {
  from {
    opacity: 1.0;
  }

  50% {
    opacity: 0.4;
  }

  to {
    opacity: 1.0;
  }
}

@-webkit-keyframes fade

/* Safari 和 Chrome */
  {
  from {
    opacity: 1.0;
  }

  50% {
    opacity: 0.4;
  }

  to {
    opacity: 1.0;
  }
}

@-o-keyframes fade

/* Opera */
  {
  from {
    opacity: 1.0;
  }

  50% {
    opacity: 0.4;
  }

  to {
    opacity: 1.0;
  }
}
</style>